<script setup>
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'

let charts = ref()  // 获取 组件实例

onMounted(()=>{
    // 初始化echarts
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        title:{  // 设置图表的标题
            text:'景区排行',
            textStyle:{  // 设置标题的样式
                color:'#29fcff',
                // fontWeight:'1000'  // 设置文字加粗
            },
            // link:'https://www.baidu.com', // 设置标题超链接
            left:'center', 
            subtext:'各大景区的排行信息',  // 设置子标题
            subtextStyle:{  // 设置标题的样式
                color:'#00fccf',    
            },
        },
        xAxis:{
            show:true,type:'category',
            data:['重庆','广州','三亚','海南','鼓浪屿','苏州','杭州','江南','西湖']  // x轴显示的坐标数据
        },
        yAxis:{
            show:true,
        },
        series:[
            {
                type:'bar',data:[20,40,60,80,100,90,120,160,170],
                barWidth:20,
                label:{show:true,position:'inside',fontSize:18},
                itemStyle:{
                    borderRadius:20,
                    // 可以用函数的方式设置颜色
                    color:(data)=>{
                        let arr = ['red','orange','yellowgreen','green','purple','hotpink','skyblue']
                        return arr[data.dataIndex % arr.length]
                    },
                },
                showBackground:true,
                backgroundStyle: {
                    //底部背景的颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'black' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            {
                type:'line',data:[20,40,60,80,100,90,120,160],
                smooth:true
            },
        ],
        // 提示文本
        tooltip:{

        },
        // 布局配置
        grid:{left:'10%',right:'10%',top:'20%',bottom:'30'},
    })
})
</script>

<template>
    <div class="box6">
        <div class="title">
            <p>热门景区排行</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box6 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    color: rgb(74, 243, 243);
    font-size: 16px;
    margin-top: 10px;
    .title {
        // margin-left: 20px;
    }

    .charts {
        width: 100%;
        height: calc(100% - 30px);
    }
}
</style>